<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>propsData</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <body>
    <h1>Hello propsData</h1>
    <hr />
    <header></header>
  </body>

  <script>
    var header_a = Vue.extend({
      template: '<p>{{message}}---{{a}}</p>',
      data: function () {
        return {
          message: 'Hello I am a Header'
        }
      },
      props: ['a']
    })
    new header_a({ propsData: { a: "Hello " } }).$mount('header')
  </script>
</html>
